<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/idangerous.swiper2.7.6.min.css" />
		<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.3dflow.min.css" />

		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			#main {
				width: 100%;
				height: 667px;
				position: absolute;
				background-size: cover;
				background-image: url(img/beijing1.jpg);
				opacity: 0.9;
				z-index: 0;
				overflow: hidden;
			}
			
			.swiper-container {
				padding: 50px 0px;
				width: 100%;
				height: 260px;
			}
			
			.swiper-wrapper {
				width: 100%;
				margin-left: -20px;
			}
			
			.swiper-slide {
				width: 180px;
				height: 220px;
				-webkit-box-reflect: below 1px -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.7) 0px, rgba(0, 0, 0, 0) 30px);
			}
			
			.swiper-slide img {
				height: 100%;
			}
			
			#num1,
			#num2,
			#num3,
			#num4,
			#num5 {
				width: 120px;
				text-align: center;
				/*color: #F7F7F3;*/
				color: #c3b596;
				font-size: 14px;
			}
			
			#num1 {
				position: relative;
				top: 15px;
				left: 80px;
				transform: rotate(-17deg);
				-ms-transform: rotate(-17deg);
				/* IE 9 */
				-webkit-transform: rotate(-17deg);
				/* Safari and Chrome */
				-o-transform: rotate(-17deg);
				/* Opera */
				-moz-transform: rotate(-17deg);
				/* Firefox */
			}
			
			#num2 {
				position: relative;
				top: 40px;
				left: 80px;
				width: 150px;
				transform: rotate(13deg);
				-ms-transform: rotate(13deg);
				/* IE 9 */
				-webkit-transform: rotate(13deg);
				/* Safari and Chrome */
				-o-transform: rotate(13deg);
				/* Opera */
				-moz-transform: rotate(13deg);
				/* Firefox */
			}
			
			#num3 {
				position: relative;
				top: 80px;
				left: 42px;
				width: 220px;
				height: 30px;
				line-height: 30px;
				font-size: 20px;
				/*color: #EF5042;*/
				color: #D8CEC5;
				font-weight: bold;
				transform: rotate(45deg);
				-ms-transform: rotate(43deg);
				/* IE 9 */
				-webkit-transform: rotate(43deg);
				/* Safari and Chrome */
				-o-transform: rotate(43deg);
				/* Opera */
				-moz-transform: rotate(43deg);
				/* Firefox */
			}
			
			#num4 {
				position: relative;
				top: 68px;
				left: 8px;
				width: 155px;
				transform: rotate(73deg);
				-ms-transform: rotate(73deg);
				/* IE 9 */
				-webkit-transform: rotate(73deg);
				/* Safari and Chrome */
				-o-transform: rotate(73deg);
				/* Opera */
				-moz-transform: rotate(73deg);
				/* Firefox */
			}
			
			#num5 {
				position: relative;
				top: 46px;
				left: -45px;
				width: 150px;
				transform: rotate(105deg);
				-ms-transform: rotate(105deg);
				/* IE 9 */
				-webkit-transform: rotate(105deg);
				/* Safari and Chrome */
				-o-transform: rotate(105deg);
				/* Opera */
				-moz-transform: rotate(105deg);
				/* Firefox */
			}
			
			#num1 span:nth-of-type(1),
			#num2 span:nth-of-type(1),
			#num3 span:nth-of-type(1),
			#num4 span:nth-of-type(1),
			#num5 span:nth-of-type(1) {
				float: left;
				width: 55px;
			}
			
			#num3 span:nth-of-type(1){
				margin-right: 20px;
			}
			#num3 span:nth-of-type(2){
				width: 55px;
				margin-right: 35px;
			}
			
			#time {
				width: 100%;
				height: 200px;
			}
			
			#time>img {
				width: 320px;
				height: 320px;
				position: absolute;
				top: -75px;
				left: -75px;
			}
			
			#show {
				width: 100%;
				height: 100%;
				position: relative;
				display: none;
			}
			
			#show>img {
				width: 200%;
			}
			
			#show>p {
				width: 120px;
				height: 50px;
				position: absolute;
				bottom: 20px;
				right: 40px;
				color: white;
			}
			
			#show>p>img {
				width: 50px;
				vertical-align: middle;
			}
			
			/*#jqname {
				width: 180px;
				height: 80px;
				position: absolute;
				top: 110px;
				right: 20px;
			}
			
			#jqname>img {
				width: 100%;
			}*/
		</style>
	</head>

	<body>
		<div id="main"></div>
		<div id="time">
			<img src="img/yuan.png" />
			<div id="num1">
				<span id="">1月</span>
				<span id="">5日</span>
			</div>
			<div id="num2">
				<span id="">1月</span>
				<span id="">20日</span>
			</div>
			<div id="num3">
				<span id="">2月</span>
				<span id="">3日</span>
				<span id="">立春</span>
			</div>
			<div id="num4">
				<span id="">2月</span>
				<span id="">18日</span>
			</div>
			<div id="num5">
				<span id="">3月</span>
				<span id="">5日</span>
			</div>
		</div>
		<!--<div id="jqname"><img src="img/zi1.png" /></div>-->

		<div class="swiper-container" id="swiper-container2">
			<div class="swiper-wrapper">
				<div class="swiper-slide" onclick="show1()">
					<img src="img/1.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/2.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/3.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/4.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/5.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/6.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/7.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/8.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/9.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/10.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/11.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/12.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/13.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/14.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/15.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/16.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/17.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/18.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/19.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/20.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/21.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/22.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/23.jpg" />
				</div>
				<div class="swiper-slide">
					<img src="img/24.jpg" />
				</div>
			</div>
		</div>

		<div id="show">
			<p><img src="img/jiantou1.png"/>请向左滑</p>
			<img src="img/showimg/1.jpg"  onclick="disimg()" />
		</div>

		<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/idangerous.swiper2.7.6.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/idangerous.swiper.3dflow.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#main").css("height", "" + $(window).height() + "px");
			$("#main").css("width", "" + $(window).width() + "px");
			$("#show").css("height", "" + $(window).height() + "px");
			$("#show").css("width", "" + $(window).width() + "px");
			$("#show>img").css("height", "" + $(window).height() + "px");
			$("#main").css("overflow", "hidden");
			var json1 = [
				{ "first": "2", "last": "3", "zi": "立春" },
				{ "first": "2", "last": "18", "zi": "雨水" },
				{ "first": "3", "last": "5", "zi": "惊蛰" },
				{ "first": "3", "last": "20", "zi": "春分" },
				{ "first": "4", "last": "4", "zi": "清明" },
				{ "first": "4", "last": "20", "zi": "谷雨" },
				{ "first": "5", "last": "5", "zi": "立夏" },
				{ "first": "5", "last": "21", "zi": "小满" },
				{ "first": "6", "last": "5", "zi": "芒种" },
				{ "first": "6", "last": "21", "zi": "夏至" },
				{ "first": "7", "last": "7", "zi": "小暑" },
				{ "first": "7", "last": "22", "zi": "大暑" },
				{ "first": "8", "last": "7", "zi": "立秋" },
				{ "first": "8", "last": "23", "zi": "处暑" },
				{ "first": "9", "last": "7", "zi": "白露" },
				{ "first": "9", "last": "23", "zi": "秋分" },
				{ "first": "10", "last": "8", "zi": "寒露" },
				{ "first": "10", "last": "23", "zi": "霜降" },
				{ "first": "11", "last": "7", "zi": "立冬" },
				{ "first": "11", "last": "22", "zi": "小雪" },
				{ "first": "12", "last": "7", "zi": "大雪" },
				{ "first": "12", "last": "22", "zi": "冬至" },
				{ "first": "1", "last": "5", "zi": "小寒" },
				{ "first": "1", "last": "20", "zi": "大寒" }
			];

			function show1() {
//				$("#jqname").css("display", "none");
				$("#show").css("display", "block");
				$("#main").css("display", "none");
				$("#time").css("display", "none");
				$(".swiper-container").css("display", "none");
			}

			function disimg(){
				$("#show").css("display", "none");
				$("#main").css("display", "block");
				$("#time").css("display", "block");
//				$("#jqname").css("display", "block");
				$(".swiper-container").css("display", "block");
			}


			var num1 = document.getElementById("num1");
			var num2 = document.getElementById("num2");
			var num3 = document.getElementById("num3");
			var num4 = document.getElementById("num4");
			http: //127.0.0.1:8020/lian5/img/showimg/1.jpg
				var num5 = document.getElementById("num5");

			var mySwiper = new Swiper('#swiper-container2', {
				slidesPerView: 3,
				loop: false,
				centeredSlides: true,
				//Enable 3D Flow
				tdFlow: {
					rotate: 25,
					stretch: 50,
					depth: 80,
					modifier: 1,
					shadows: false,
				},
				onSlideChangeEnd: function(swiper) {
					//获取当前图片的索引值
					console.log(swiper.activeIndex);
					var newindex = swiper.activeIndex;

					$(".swiper-slide").bind('click', function() {
//						$("#jqname").css("display", "none");
						$("#show").css("display", "block");
						$("#main").css("display", "none");
						$("#time").css("display", "none");
						$(".swiper-container").css("display", "none");
						var x = newindex + 1;
						$("#show>img").attr("src", "img/showimg/" + x + ".jpg");
					});
					$("#show img").bind('click', function() {
						$("#show").css("display", "none");
						$("#main").css("display", "block");
						$("#time").css("display", "block");
//						$("#jqname").css("display", "block");
						$(".swiper-container").css("display", "block");
					});

					var a = newindex - 2;
					var b = newindex - 1;
					var c = newindex + 1;
					var d = newindex + 2;
//					$("#jqname").html(json1[newindex].zi);
					//					$("#main").css("background-image", "url(img/beijing/" + c + ".jpg)");
					num3.children[0].innerHTML = json1[newindex].first + "月";
					num3.children[1].innerHTML = json1[newindex].last + "日";
					num3.children[2].innerHTML = json1[newindex].zi;
					if(a < 0) {
						a = 23;
						num1.children[0].innerHTML = json1[a].first + "月";
						num1.children[1].innerHTML = json1[a].last + "日";
					}
					if(b < 0) {
						b = 23;
						a = 22;
						num1.children[0].innerHTML = json1[a].first + "月";
						num1.children[1].innerHTML = json1[a].last + "日";
						num2.children[0].innerHTML = json1[b].first + "月";
						num2.children[1].innerHTML = json1[b].last + "日";
					}
					if(c > 23) {
						c = 0;
						a = 1;
						num4.children[0].innerHTML = json1[c].first + "月";
						num4.children[1].innerHTML = json1[c].last + "日";
					}
					if(d > 23) {
						d = 0;
						c = 1;
						num4.children[0].innerHTML = json1[c].first + "月";
						num4.children[1].innerHTML = json1[c].last + "日";
						num5.children[0].innerHTML = json1[d].first + "月";
						num5.children[1].innerHTML = json1[d].last + "日";
					}

					num1.children[0].innerHTML = json1[a].first + "月";
					num1.children[1].innerHTML = json1[a].last + "日";
					num2.children[0].innerHTML = json1[b].first + "月";
					num2.children[1].innerHTML = json1[b].last + "日";
					num4.children[0].innerHTML = json1[c].first + "月";
					num4.children[1].innerHTML = json1[c].last + "日";
					num5.children[0].innerHTML = json1[d].first + "月";
					num5.children[1].innerHTML = json1[d].last + "日";

				},

			});
		</script>
	</body>

</html>